<!DOCTYPE html>
<html lang="en">
<head>
  <title>{$title}</title>
  <meta charset="UTF-8">
  <meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=no"
        name="viewport">
  <link rel="stylesheet" href="{$Think.config.site.resource_url}css/assets/login_base.css">
  <link rel="stylesheet" href="{$Think.config.site.resource_url}css/assets/login_public.css">
  <title>共享充电宝</title>

  <script src="{$Think.config.site.resource_url}js/assets/alert.js"></script>
  <link rel="stylesheet" href="{$Think.config.site.resource_url}css/assets/alert.css">

</head>
<body class="login-wrapper">
<iframe src="" frameborder="0" name="add_form_iframe" style="display: none"></iframe>
<form action="/home/Login/login" id="form" target="add_form_iframe" method="post">
  <section class="info">
    <input type="hidden" name="backFunc" value="backFunc">
    <div class="row">
      <input id="tel" class="row-input" placeholder="手机号码" type="text" name="phone"/>
    </div>
    <div class="row">
      <input id="code" class="row-input" placeholder="请输入验证码" type="text" name="code"/>
      <dev id="getCode" class="btn-code">获取验证码</dev>
    </div>
  </section>


  <section class="select-identity">
    <div class="cell-hd" style="width: 30%">登录身份</div>
    <select name="role" id="experience" class="cs-select cs-skin-elastic" style="width: 40%;">
      <option value="1">代理商</option>
      <option value="2">地推</option>
      <option value="3">商户</option>
    </select>
  </section>
  <section class="button-wrapper">
    <button class="btn-login" onclick="">登录</button>
  </section>
</form>
<script src="{$Think.config.site.resource_url}js/assets/fastclick.js"></script>
<script src="{$Think.config.site.resource_url}js/assets/zepto.min.js"></script>
<script src="{$Think.config.site.resource_url}js/assets/utils.js"></script>
<script>
  Utils.initRootFontSize();
  $(function() {
    FastClick.attach(document.body);
  });
  //倒计时
  var seconds = 100;
  var getCodeDisabled = false; //按钮禁用
  function countdown() {
    if (seconds == 0) {
      seconds = 100;
      getCodeDisabled = false;
      $('#getCode').html("发送验证码").removeClass('disabled');
    } else {
      getCodeDisabled = true;
      seconds--;
      $('#getCode').html(seconds + '秒后重发').addClass('disabled');
      setTimeout(function () {
        countdown();
      }, 1000);
    }
  }
  //获取手机号码
  function getTel() {
    var tel = $('#tel').val();
    if(!tel) {
      Utils.showToast('请填写手机号码');
      return false;
    }
    if(!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(tel))) {
      Utils.showToast('请填写正确的手机号码');
      return false;
    }
    return tel;
  }
  //发送验证码
  $('#getCode').on('click', function () {
    if (!getTel()) {
      return;
    }
    if (getCodeDisabled) {
      return ;
    } else {
        $.ajax({
            type : 'POST',
            url : '/home/Login/smscode',
            data : {phone : $('#tel').val()},
            success : function(res) {
                var res=eval("("+res+")")
                if(1 == res.code) {
                    Utils.showToast('短信已发送，请及时查看');
                    countdown();
                }  else  {
                    Utils.showToast('验证码获取失败，请稍后重试');
                }
            },
            error : function(){
                Utils.showToast('服务器错误！请稍后重试');
            }
        })
    }
  });
  function backFunc(data) {
      if(data.res == 1) {
          Utils.showToast(data.msg);
          window.location.href="/home/index/index";
      } else {
          Utils.showToast(data.msg);
      }
  }


  // 登录
  function login() {
    var tel = $('#tel').val();
    var identity = $('.identity-box').find('.selected') && $('.identity-box').find('.selected').data('value')
    if (!tel) {
      Utils.showToast('请填写手机号码');
      return;
    }
    if (tel && !/^1\d{10}$/g.test(tel)) {
      Utils.showToast('请填写正确的手机号码');
      return;
    }

    // 提交注册请求 tel,password, code, identity
  }
</script>
</body>
</html>
